<template>
  <div class="file-path">
    <a-breadcrumb>
      <a-breadcrumb-item @click="pathClick(item)" v-for="item in filePathList" :key="item.fileId" ><span class="path-item">{{item.name}}</span></a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script setup lang="ts">

const filePathList = ref([
  {
    name: '全部',
    fileId: 0
  }
])

const pushPath = (item: any) => {
  filePathList.value.push(item)
}

const emit = defineEmits([
  'pathClick'
])

const pathClick = (item: any) => {
  let index = filePathList.value.findIndex((i) => i.fileId === item.fileId)
  filePathList.value = filePathList.value.slice(0, index + 1)
  emit('pathClick', filePathList.value[filePathList.value.length - 1].fileId)

}

defineExpose({ pushPath })


</script>

<style lang="scss" scoped>
.file-path {
  padding: 10px $padding;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .path-item {
    font-size: 12px;
    &:hover {
      color: rgba(var(--primary-6));
    }
  }
}
</style>
